<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件基础-component监听子组件事件</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style>

    </style>
</head>
<body>
<div id="app">

    <div class="blog_area">
        <blog-info
                v-for="blog in blogs"
                :blog="blog"
        ></blog-info>
    </div>


</div>


<script>

    Vue.component('blog-info',{
        props:['blog'],
        template:"<div>\
                   <h3>id为：{{blog.id}}</h3>\
                   <h4>标题为：{{blog.name}}</h4>\
                    内容：<div v-html='blog.content'></div>\
                    时间：<span v-html='blog.date'></span>\
              </div>"
    });

    var app= new Vue({
        el:'#app',
        data:{
            blogs:[
                {id:100,name:"博客文章1",content:"博客1文章内容信息content...",date:"2019.02.10"},
                {id:200,name:"博客文章2",content:"博客2文章内容信息content...",date:"2019.03.10"},
                {id:300,name:"博客文章3",content:"博客3文章内容信息content...",date:"2019.04.10"}
            ],

        },
        methods:{

        }
    })
</script>
</body>
</html>
